<script>
export default {
  data() {
    return {
      viewer: undefined,
      highDynamicRange: false,
      sceneMode: undefined,
      fxaa: false,
      sun: false,
      moon: false,
      showSkyBox: false,
      backgroundColor: '',
      showSkyAtmosphere: false,
      fog: false,
    };
  },
  beforeMount() {
    this.viewer = this.$store.state.viewer;
    this.settingOptions = this.viewer.zz._settingOptions;

    this.highDynamicRange = this.settingOptions.getOption('highDynamicRange');
    this.sceneMode = this.settingOptions.getOption('mode');
    this.fxaa = this.settingOptions.getOption('fxaa');
    this.sun = this.settingOptions.getOption('sun');
    this.moon = this.settingOptions.getOption('moon');
    this.showSkyBox = this.settingOptions.getOption('showSkyBox');
    this.backgroundColor = this.settingOptions.getOption('backgroundColor');
    this.showSkyAtmosphere = this.settingOptions.getOption('showSkyAtmosphere');
    this.fog = this.settingOptions.getOption('fog');
  },
  watch: {
    highDynamicRange(newValue) {
      this.settingOptions.setOption('highDynamicRange', newValue);
    },
    sceneMode(newValue) {
      this.settingOptions.setOption('mode', newValue);
    },
    fxaa(newValue) {
      this.settingOptions.setOption('fxaa', newValue);
    },
    sun(newValue) {
      this.settingOptions.setOption('sun', newValue);
    },
    moon(newValue) {
      this.settingOptions.setOption('moon', newValue);
    },
    showSkyBox(newValue) {
      this.settingOptions.setOption('showSkyBox', newValue);
    },
    backgroundColor(newValue) {
      this.settingOptions.setOption('backgroundColor', newValue);
    },
    showSkyAtmosphere(newValue) {
      this.settingOptions.setOption('showSkyAtmosphere', newValue);
    },
    fog(newValue) {
      this.settingOptions.setOption('fog', newValue);
    },
  }
};






</script>
<template>
  <table class="zz-scene-table">
    <tr>
      <td class="first-col">场景模式</td>
      <td class="secode-col">
        <el-radio-group v-model="sceneMode">
          <el-radio :label="3">三维视图</el-radio>
          <el-radio :label="2">二维视图</el-radio>
        </el-radio-group>
      </td>
    </tr>
    <tr>
      <td>高动态渲染</td>
      <td>
        <el-switch v-model="highDynamicRange" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <!-- <tr>
        <td>使用Webgl2</td>
        <td>
          <el-switch v-model="requestWebgl2" inline-prompt active-text="是" inactive-text="否" />
        </td>
      </tr>
      <tr>
        <td>MSAA抗锯齿</td>
        <td>
          <el-radio-group v-model="msaaSamples">
            <el-radio :label="1">无</el-radio>
            <el-radio :label="2">二倍</el-radio>
            <el-radio :label="4">四倍</el-radio>
            <el-radio :label="8">八倍</el-radio>
          </el-radio-group>
        </td>
      </tr> -->

    <tr>
      <td>快速抗锯齿</td>
      <td>
        <el-switch v-model="fxaa" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>

    <tr>
      <td>显示太阳</td>
      <td>
        <el-switch v-model="sun" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <tr>
      <td>显示月亮</td>
      <td>
        <el-switch v-model="moon" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <tr>
      <td>显示天空盒</td>
      <td>
        <el-switch v-model="showSkyBox" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <tr title="请关闭天空盒看效果">
      <td>空间背景颜色</td>
      <td>
        <el-color-picker v-model="backgroundColor" />
      </td>
    </tr>
    <tr>
      <td>大气外光圈</td>
      <td>
        <el-switch v-model="showSkyAtmosphere" inline-prompt active-text="开" inactive-text="关" />
      </td>
    </tr>
    <tr>
      <td>雾化效果</td>
      <td>
        <el-switch v-model="fog" inline-prompt active-text="开" inactive-text="关" />
      </td>
    </tr>
  </table>
</template>

<style scoped>
@import "./sceneConfig.css"
</style>
